<template>
  <div class="flex actions-btn-group flex-nowrap">
    <a-button type="primary" @click="toCreateTaskForm">创建任务</a-button>
    <a-button :disabled="btnVisible" @click="startOrDisabledHandle(2, '', '定时任务')">启用</a-button>
    <a-button :disabled="btnVisible" @click="startOrDisabledHandle(1, '', '定时任务')">禁用</a-button>
    <a-button danger :disabled="btnVisible" @click="handleDeleteTask">删除</a-button>
  </div>
  <!-- 批量启用禁用 -->
  <ModalView
    title="提示"
    v-model:visible="modalTaskVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="disableConfirm"
    @cancel="disableCancel"
  >
    <span>{{ `确定要${startOrDisabledBtnTextDefault}该定时任务吗？` }}</span></ModalView
  >
  <!-- 批量删除 -->
  <ModalView
    title="提示"
    v-model:visible="deleteTaskVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要刪除该定时任务吗？</span></ModalView
  >
</template>

<script lang="ts" setup name="ActionsBtnGroup">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { selectedRowKeys } from '../../../../hooks/useTable'
import ModalView from '@/components/components/modal/ModalView.vue'
import {
  startOrDisableStatus,
  deleteResourceSite,
  modalTaskVisible,
  deleteTaskVisible,
  setStartOrDisableRequestApi,
  setDeleteRequestApi
} from '../../../../public-handle'
import apis from '@/apis'
const { updateTaskStatusMultiple, deleteCollectTaskMultiple } = apis.collectManage
const btnVisible = computed(() => !selectedRowKeys.value?.length)

const router = useRouter()
const taskType = ref()
const taskId = ref()
const taskText = ref()
const toCreateTaskForm = () => {
  router.push({ name: 'AddEditTimedTaskForm' })
}
const startOrDisabledBtnTextDefault = computed((): string => {
  if (taskType.value === 2) {
    return '启用'
  }
  if (taskType.value === 1) {
    return '禁用'
  }
  return ''
})
const startOrDisabledHandle = (type: number, id: any, text: string) => {
  // startOrDisableStatus(type, '', '定时任务')
  if (type === 2) {
    setStartOrDisableRequestApi(updateTaskStatusMultiple)
    startOrDisableStatus(type, id, '定时任务')
  } else {
    console.log('type: ', type)
    taskType.value = type
    taskId.value = id
    taskText.value = text
    modalTaskVisible.value = true
  }
}
//禁用确认
const disableConfirm = (value: any) => {
  setStartOrDisableRequestApi(updateTaskStatusMultiple)
  startOrDisableStatus(taskType.value, taskId.value, '定时任务')
}
//禁用取消
const disableCancel = () => {
  modalTaskVisible.value = false
  selectedRowKeys.value = []
}
const handleDeleteTask = () => {
  deleteTaskVisible.value = true
}
//刪除确认
const deleteConfirm = (value: any) => {
  setDeleteRequestApi(deleteCollectTaskMultiple)
  deleteResourceSite('', '定时任务')
}
//刪除取消
const deleteCancel = () => {
  deleteTaskVisible.value = false
  selectedRowKeys.value = []
}
</script>

<style lang="less" scoped>
.actions-btn-group {
  .ant-btn:not(:first-child) {
    margin-left: 10px;
  }
}
</style>
